<template>
  <div>
    <div style="display: flex;justify-content: space-around;">
      <el-row>
        <el-col>
          <div class="grid-content bg-purple-dark">
            <el-table
                :data="tableData"
                highlight-current-row
                style="width: 100%"
                @current-change="handleCurrentChange">
              <el-table-column
                  label="编号"
                  prop="productId"
                  width="360">
              </el-table-column>
              <el-table-column
                  label="商品名称"
                  prop="productName"
                  width="360">
              </el-table-column>
              <el-table-column
                  label="商品类别"
                  prop="productType"
                  width="360">
              </el-table-column>
              <el-table-column
                  label="厂家"
                  prop="factory"
                  width="360">
              </el-table-column>
              <el-table-column
                  label="库存"
                  prop="productNum"
                  width="360">
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <div class="block">
            <el-pagination
                :current-page=currentPage
                :page-size=pageSize
                :total=totalSize
                background
                layout="prev, pager, next"
                @current-change="currentPageFn">
            </el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>

    <div style="display: flex;justify-content: center">
      <el-form style="margin-right: 10px;margin-top: 10px">
        <el-form-item label="商品类别">
          <el-select v-model="value" placeholder="请选择">
            <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="searchScope" style="width:200px;margin-right: 10px"></el-input>
        </el-form-item>
      </el-form>
      <el-row style="margin-top: 50px">
        <el-button plain type="primary" @click="showPage">查询</el-button>
        <el-button plain type="primary" @click="showProductById">查看商品详情</el-button>
        <el-button plain type="primary" @click="altProductById">修改商品详情</el-button>
      </el-row>
    </div>

    <el-dialog
        :visible.sync="showInfoById"
        title="库存商品信息详情"
        width="30%">
      <div class="block">
        <el-avatar :size="150" :src="circleUrl" shape="square"></el-avatar>
      </div>
      <el-form label-width="100px">
        <el-form-item label="商品名称">
          {{ currentRow.productName }}
        </el-form-item>
        <el-form-item label="厂家">
          {{ currentRow.factory }}
        </el-form-item>
        <el-form-item label="类别">
          {{ currentRow.productType }}
        </el-form-item>
        <el-form-item label="库存数量">
          {{ currentRow.productNum }}
        </el-form-item>
        <el-form-item label="建议采购价格">
          {{ currentRow.purchasePrice }}
        </el-form-item>
        <el-form-item label="建议销售价格">
          {{ currentRow.salePrice }}
        </el-form-item>
      </el-form>
    </el-dialog>


    <el-dialog
        :visible.sync="altInfoById"
        title="库存商品信息详情"
        width="30%">
      <div class="block">
        <el-avatar :size="150" :src="circleUrl" shape="square"></el-avatar>
      </div>
      <el-form label-width="100px">
        <el-form-item label="商品名称">
          {{ currentRow.productName }}
        </el-form-item>
        <el-form-item label="厂家">
          {{ currentRow.factory }}
        </el-form-item>
        <el-form-item label="类别">
          {{ currentRow.productType }}
        </el-form-item>
        <el-form-item label="库存数量">
          {{ currentRow.productNum }}
        </el-form-item>
        <el-form-item label="建议采购价格">
          {{ currentRow.purchasePrice }}
        </el-form-item>
        <el-form-item label="建议销售价格">
          <el-input v-model="newSalePrice" style="width:200px;margin-right: 10px"></el-input>
        </el-form-item>
        <el-button plain type="primary" @click="updateNew">修改</el-button>
      </el-form>
    </el-dialog>


  </div>
</template>

<script>

export default {
  name: "ProductInfo",
  data() {
    return {
      tableData: [],
      totalSize: 0,//总行数
      pageSize: 0,//当前显示数据页
      currentPage: 0,//当前页码
      currentRow: 0,//当前选中列

      searchScope: '',

      startNum: 0,
      endNum: 500,

      options2: [{
        value: '电脑产品',
        label: '电脑产品'
      }, {
        value: '安防产品',
        label: '安防产品'
      }, {
        value: '打印扫描设备',
        label: '打印扫描设备'
      }, {
        value: '办公耗材',
        label: '办公耗材'
      }],
      value: '电脑产品',

      showInfoById: false,
      circleUrl: '',

      altInfoById: false,
      newSalePrice: 0


    }
  }, mounted() {
    this.showPage()
  },
  methods: {
    currentPageFn(currentPage) {
      this.currentPage = currentPage
      this.showPage()
    },
    handleCurrentChange(val) {
      //必须不为null才能进行跳转分页
      if (val != null) {
        this.currentRow = val;
      }
    },
    showPage() {
      let sc = this.searchScope;
      if (this.searchScope === '') {
        sc = 1
      }
      let url = "api/product/showProductByPage/" + this.currentPage + "/" + sc + "/" + this.value + "/" + this.startNum + "/" + this.endNum
      this.axios.get(url).then(r => {
        this.tableData = r.data.records
        this.totalSize = r.data.total
        this.pageSize = r.data.size
        this.searchScope = ''
      })
    },
    showProductById() {
      if (this.currentRow == 0) {
        this.messageShow("查询失败", "请先选择行")
        return
      }
      this.showInfoById = true
      let url = "api/product/findProductById/" + this.currentRow.productId
      this.axios.get(url).then(r => {
        console.log(r.data)
        this.circleUrl = "api/img/" + r.data.imgPath
      })
    },
    altProductById() {
      if (this.currentRow == 0) {
        this.messageShow("修改失败", "请先选择行")
        return
      }
      //显示
      let url = "api/product/findProductById/" + this.currentRow.productId
      this.axios.get(url).then(r => {
        console.log(r.data)
        this.circleUrl = "api/img/" + r.data.imgPath
      })
      this.altInfoById = true
    },
    updateNew() {
      if (this.newSalePrice < 0) {
        this.messageShow("无法修改", "新的售价无法为负")
        return
      }
      let url = "api/product/updateProductPrice/" + this.currentRow.productId + "/" + this.newSalePrice
      this.axios.post(url).then(r => {
        console.log(r.data)
        this.messageShow("", r.data.info)
      })
      this.altInfoById = false
      this.newSalePrice = 0
      this.showPage()
    },
    messageShow(title, message) {
      this.$notify({
        title: title,
        message: (message)
      });
    }
  }
}
</script>

<style scoped>

</style>